<template>
    <van-row justify="center">
        <van-col span="24" class="title">
            {{ headerTitle }}
        </van-col>
    </van-row>

    <van-row justify="center">
        <van-col span="24">
            <van-search shape="round" v-model="searchContent" :placeholder="placeholder" maxlength="8" />
        </van-col>
    </van-row>

    <van-tabbar v-model="active" @change="onChange">
        <van-tabbar-item icon="home-o">标签1</van-tabbar-item>
        <van-tabbar-item icon="search">标签2</van-tabbar-item>
        <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>
        <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
    </van-tabbar>
</template>

<script>
import { ref } from 'vue';
import { useStore } from 'vuex';
export default {
    name: 'Home',
    setup() {
        // 暴露成员
        return {
            ...useStore().state, // Vuex数据
            active: ref(0)
        };
    }
};
</script>

<style lang="less" scoped>
.title {
    text-align: center;
    height: 0.5rem;
    line-height: 0.5rem;
    font-size: 0.1875rem;
    font-weight: bold;
    color: white;
    background: @themeColor;
    letter-spacing: 0.0625rem;
}
</style>
